<template>
	<view>
		<view class="people-list">
			<view class="groupTittle">群聊成员</view>
			<view class="row">
				<template v-for="(item,index) in peopleData">
					<view class="groupBox" @click="toPage(item)" v-if="item.userID == groupLeaderId" mode="">
						<view :class=" item.userID == groupLeaderId? 'avatarBox':''">
							<image class="groupLeader" src="../../../static/img/groupLeader.png"></image>
							<image :src="item.avatar" style="width: 50px;height: 50px;border-radius: 5px;"></image>
						</view>
						<view class="nickBox" v-if="item.nameCard == true">{{ item.nameCard }}</view>
						<view class="nickBox" v-else>{{ item.nick }}</view>
					</view>
				</template>
				<template v-for="(item,index) in peopleData">
					<view v-if="item.userID != groupLeaderId" class="groupBox" @click="toPage(item)">
						<view :class=" item.userID == groupLeaderId? 'avatarBox':''">
							<image class="groupLeader" src="../../../static/img/groupLeader.png" v-if="item.userID == groupLeaderId" mode=""></image>
							<image :src="item.avatar" style="width: 50px;height: 50px;border-radius: 5px;"></image>
						</view>
						<view class="nickBox" v-if="item.nameCard == true">{{ item.nameCard }}</view>
						<view class="nickBox" v-else>{{ item.nick }}</view>
					</view>
				</template>
			</view>
		</view>
		<view class="line"></view>
		<view class="group-name">
			<view class="title">房间名称</view>
			<input class="text textInput" type="text" v-if="myID == groupLeaderId" @blur="handleSaveGroupInfo" value="" v-model="groupInfo.name" />
			<view class="text" v-else>{{ groupInfo.name }}</view>
			<image class="editNickName" src="../../../static/img/arrow.png" mode=""></image>
		</view>
		<view class="group-name" v-if="myID==groupLeaderId" @click="editNickName(1)">
			<view class="title">编辑群公告</view>
			<view class="text">{{ groupInfo.notification }}</view>
			<image class="editNickName" src="../../../static/img/arrow.png" mode=""></image>
		</view>
		<view class="group-name" @click="editNickName(0)">
			<view class="title">修改备注</view>
			<view class="text">{{ nameCard }}</view>
			<image class="editNickName" src="../../../static/img/arrow.png" mode=""></image>
		</view>
		<view class="group-name" @click="toUserList" v-if="myID==groupLeaderId">
			<view class="title">成员管理</view>
			<view class="text"></view>
			<image class="editNickName" src="../../../static/img/arrow.png" mode=""></image>
		</view>
		<view class="exit-box">
			<button v-if="myID == groupLeaderId" type="warn" @click="dissolveGroup">解散群聊</button>
			<button v-else type="warn" @click="exitGroup">退出群聊</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: "",
				peopleData: [],
				userinfo: {},
				groupInfo: {},
				groupLeaderId: '',
				myNickName: '',
				nameCard: '',
				myID: null
			}
		},
		onShow() {
			this.myID = JSON.parse(uni.getStorageSync('userInfo')).id
			let that = this;
			// 该接口默认只会拉取这些资料：群类型、群名称、群头像、最后一条消息的时间。
			// let promise = this.tim.getGroupList();
			// promise.then(function(imResponse) {
			//   // console.log(imResponse.data.groupList); // 群组列表
			// }).catch(function(imError) {
			//   console.warn('getGroupList error:', imError); // 获取群组列表失败的相关信息
			// });
			this.myNickName = uni.getStorageSync('nickname')
			let groupId = uni.getStorageSync('chooseGroup')
			this.groupId = groupId.substr(5, groupId.length - 1);
			this.getGroupLeaderId()
			let promise = this.tim.getGroupProfile({
				groupID: this.groupId
			});
			promise.then(function(imResponse) {
				// console.log(imResponse)
				that.groupInfo = imResponse.data.group;
				that.nameCard = that.groupInfo.selfInfo.nameCard
				uni.setStorageSync("selfInfo", that.groupInfo.selfInfo)
				that.getGroupPeople();
			}).catch(function(imError) {
				console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
			});
		},
		methods: {
			// 跳转到成员管理页面
			toUserList() {
				uni.navigateTo({
					url: '/pages/userList/index?groupId=' + this.groupId
				})
			},
			// 获取群主id
			getGroupLeaderId() {
				let data = {
					group_id: this.groupId
				}
				this.$utils.postrequest('/api/tim/user_group_id', data, res => {
					if (res.code == 200) {
						this.groupLeaderId = res.data
						// console.log(res)
					} else {
						// console.log("获取群主信息失败")
					}
				})
			},
			// 修改昵称
			editNickName(isAnnouncement) {
				uni.navigateTo({
					url: "editNickname/editNickname?groupId=" + this.groupId + "&isAnnouncement=" + isAnnouncement
				})
			},
			// 解散群聊
			dissolveGroup() {
				let _this = this
				_this.$utils.postrequest("/api/tim/disbandment_group", {
					group_id: _this.groupId
				}, res => {
					if (res.code === 200) {
						uni.showToast({
							title: '解散成功',
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/message/house'
							})
						}, 1000)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})

			},
			//退群
			exitGroup() {
				let promise = this.tim.quitGroup(this.groupId);
				promise.then(function(imResponse) {
					// console.log(imResponse.data.groupID); // 退出成功的群 ID
					uni.showToast({
						title: '退群成功',
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/message/house'
						})
					}, 1000)
				}).catch(function(imError) {
					let error = imError.toString()
					// console.log(imError.toString())
					uni.showToast({
						title: error,
						icon: "none"
					})
					console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
				});
			},
			toPage(item) {
				let myID = JSON.parse(uni.getStorageSync('userInfo')).id
				if (this.groupLeaderId == myID) {
					if (item.userID != this.groupLeaderId) {
						uni.navigateTo({
							url: '/pages/my/mydongtai?id=' + item.userID + '&groupID=' + this.groupId
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/my/mydongtai?id=' + item.userID
					})
				}
			},
			// 获取成员列表
			getGroupPeople() {
				let that = this;
				let promise = this.tim.getGroupMemberList({
					groupID: this.groupId,
					count: 30,
					offset: 0
				}); // 从0开始拉取30个群成员
				promise.then(function(imResponse) {
					// console.log(imResponse)
					for (let i = 0; i < imResponse.data.memberList.length; i++) {
						if (imResponse.data.memberList[i].avatar.indexOf("[") > -1) {
							imResponse.data.memberList[i].avatar = JSON.parse(imResponse.data.memberList[i].avatar)[0]
						} else if (imResponse.data.memberList[i].avatar.indexOf(",") > -1) {
							imResponse.data.memberList[i].avatar = JSON.parse(imResponse.data.memberList[i].avatar)[0]
						} else if (imResponse.data.memberList[i].avatar == "") {
							// imResponse.data.memberList.splice(i,1);
							that.$utils.postrequest("/api/getuser", {
								user_id: imResponse.data.memberList[i].userID
							}, function(res) {
								if (res.code == 200) {
									imResponse.data.memberList[i].avatar = res.data.avatar
									imResponse.data.memberList[i].nick = res.data.nickname
								}
							})
						}
					}
					// that.userinfo =  JSON.parse(uni.getStorageSync('userInfo'));
					// let objs = {
					// 	avatar:JSON.parse(that.userinfo.avatar)[0],
					// 	nick: that.userinfo.nickname,
					// 	userID: that.userinfo.id
					// };
					// // console.log(imResponse.data.memberList);
					// let objs
					imResponse.data.memberList.forEach((e, i) => {
						e.isLeader = 0
						if (e.userID == that.groupLeaderId) {
							e.isLeader = 1
						}
					})
					that.peopleData = imResponse.data.memberList; // 群成员列表
					// console.log(that.peopleData)
				}).catch(function(imError) {
					console.warn('getGroupMemberList error:', imError);
				});
			},
			// 修改群名称
			handleSaveGroupInfo() {
				let data = {
					GroupId: this.groupId,
					Name: this.groupInfo.name,
				}
				this.$utils.postrequest("/api/tim/update_group_name", data, res => {
					if (res.code === 200) {
						uni.showToast({
							icon: "success",
							title: "修改成功1"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				}
			}
		}
	}
</script>

<style>
	.row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.people-list {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 35rpx 35rpx 44rpx 29rpx;
		box-sizing: border-box;
	}

	.groupTittle {
		font-size: 34rpx;
		font-family: PingFang SC;

		color: #333333;
		padding-bottom: 31rpx;
	}

	.avatarBox {
		position: relative;
		background-color: rgb(243, 123, 33);
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		width: 104rpx;
	}

	.groupBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
	}

	.nickBox {
		width: 120rpx;
		font-size: 32rpx;
		font-family: PingFang SC;

		color: #A9A9A9;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nickBox-row {
		display: flex;
		flex-direction: row;
	}

	.groupLeader {
		height: 22rpx;
		width: 68rpx;
		position: absolute;
		z-index: 9999;
		left: 18rpx;
		top: 0;
	}

	.line {
		width: 750rpx;
		height: 16rpx;
		background: #E9E9E9;
	}

	.group-name {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 117rpx;
		padding-left: 29rpx;
		margin-top: 20rpx;
		font-size: 38rpx;
		border-bottom: 2rpx solid #E9E9E9;
	}

	.group-name .title {
		color: #333333;
		font-size: 32rpx;
	}

	.group-name .text {
		color: #8B8B8B;
		position: absolute;
		right: 68rpx;
		font-size: 30rpx;
		font-family: PingFang SC;

	}

	.textInput {
		text-align: right;
		padding: 0 10upx;
		box-sizing: border-box;
	}

	.exit-box {
		position: fixed;
		bottom: 10px;
		width: 90%;
		left: 5%;
	}

	.nickName {
		color: #a2a2a2;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		height: 20rpx;
		padding: 20rpx;
	}

	.editNickName {
		position: absolute;
		right: 31rpx;
		height: 40rpx;
		width: 40rpx;
	}
</style>
